<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="/home">首页</a>
    <a href="/about">关于</a>
    <div class="router-view"></div>
</div>
<script>
    /* history实现方案 */
    //1.获取router-view的dom
    const routerViewEl = document.getElementsByClassName("router-view")[0]
    // 获取所有的a元素，自己来监听a元素的改变
    const aEls = document.getElementsByTagName("a")
    for (let el of aEls) {
        el.addEventListener("click", e => {
            e.preventDefault()
            const href = el.getAttribute("href")
            history.pushState({}, "", href)
            urlChange()
        })
    }
    //执行返回操作时依然来到urlChange()
    window.addEventListener("popstate", urlChange)
    //url改变时进行的操作
    function urlChange() {
        switch (location.pathname) {
            case "/home":
                routerViewEl.innerHTML = "首页";
                break;
            case "/about":
                routerViewEl.innerHTML = "关于";
                break;
            default:
                routerViewEl.innerHTML = ""
                break;
        }
    }
</script>
</body>
</html>